<template>
    <span>
         <!--<el-checkbox-group v-model="checkList" class="xl-form" @change="paramsChange" >-->
             <!--<el-checkbox v-for="(box,i) in checkbox" :label="box" :key="i">{{box}}</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <el-row class="el-checkbox-group xl-form" v-if="checkbox.length!==0">
            <div class="el-checkbox"  v-for="(box,i) in checkbox" >
                <input class="el-checkbox__input" :name="item.component" :value="box" v-model="checkList" type="checkbox" @change="paramsChange" >
                <label class="el-checkbox__label">{{box}}</label>
            </div>
        </el-row>

        <TemplateImg @handle="(result,index)=>{showDetail(item,result,index)}"
                     :items="item" v-if="switchShowType(item.showType)" :params="ps" ref="module"
                     :detail="showDetailBtn(item.showType)" :defsize="defsize"></TemplateImg>
        <TemplateField @handle="(result,index)=>{showDetail(item,result,index)}"
                       :items="item" v-else :params="ps" ref="module"
                       :detail="showDetailBtn(item.showType)" :defsize="defsize"></TemplateField>
        <DetailDrawer></DetailDrawer>
    </span>
</template>

<script>
import TemplateField from '@/common/template/template-field'
import TemplateImg from '@/common/template/template-img'
import DetailDrawer from '@/common/template/detail-drawer'

export default {
  name: 'tempalte-module',
  components: { TemplateField, TemplateImg, DetailDrawer },
  data() {
    return {
      checkbox: [],
      checkList: [],
      paramsKey: '',
      item: this.module,
      ps: this.params || {}
    }
  },
  props: ['module', 'params', 'defsize'],
  watch: {
    items: {
      handler(nv, o) {
        if (nv) {
          this.item = nv.module;
        }
        switch (this.item.component) {
        case 'sameTlspManytimes':// 全省同火车
          this.item.component = 'cxvalue';
          this.checkbox = ['同车厢', '同发站', '同到站'];
          break;
        case 'sameWXHuocheManytimes':// 同火车
          this.item.component = 'wxdzvalue';
          this.checkbox = ['同车厢', '同发站', '同到站'];
          break;
        case 'sameZhusuManytimes':// 同住宿
          this.item.component = 'rzfhvalue';
          this.checkbox = ['同房间'];
          break;
        case 'sameQSZhuSuManytimes':// 全省同住宿
          this.item.component = 'fhvalue';
          this.checkbox = ['同房间'];
          break;
        default: {

        }
        }

      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    showDetailBtn(showType) {
      return ['sameSearchAll', 'sameSearchAll2'].indexOf(showType) === -1;
    },
    switchShowType(showType) {
      if (['img', 'children', 'sameSearchAll', 'sameSearchAll2'].indexOf(showType) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    paramsChange() {
      let v = [];
      // console.info(this.checkList)
      this.checkbox.forEach(c => {
        if (this.checkList.indexOf(c) !== -1) {
          v.push(true);
        } else {
          v.push(false);
        }
      })
      console.info(v.join(';'));
      if (this.item.component) {
        this.ps[this.item.component] = v.join(';');
        this.$refs['module'].reload();
      }

    },
    showDetail(table, result, index) {
      this.$axiosInstance({
        url: '/searchDetail',
        resId: ResIds.resId_searchDetail,
        method: 'get',
        params: {
          id: table.id,
          dbType: result.sourceTable,
          trsid: result.item.TRSID
        },
      }).then(res => {
        let { data, code } = res.data;
        if (code === 200) {
          this.$store.dispatch('openDialog', {
            title: table.resultName,
            data
          });
        }
      });
    }
  },
  created() {
    var me =this;
    console.info('template-module', this.params)
  },
  mounted() {
    $('.el-image').off('tap', 'img');
    $('.el-image').on('tap', 'img', function() {
      mui.previewImage();
    });
  }
}
</script>

<style scoped>

</style>
